<template>
  <div class="upload">
    <van-popup v-model="show" class="popupp">
      <div @click="openFile">从相册选择</div>
      <div @change="changeImg" style="display:none">
        <input type="file" ref="myfile" />
      </div>
      <div>拍照</div>
      <div @click="quxiao">取消</div>
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from 'vant' // vant图片预览
import { apiUpdateImg } from '@/api/use'
export default {
  data () {
    return {
      show: false // 相册的弹框
    }
  },
  methods: {
    // 打开图片选择器,得到上传框 ,他是默认隐藏的,只有点击它才会出现,<input type="file"> 开启  ref作用(本页面获取dom元素,获取子组件中的data,调用子组件的方法,子组件调用父组件方法)
    openFile () {
      this.$refs.myfile.click()
    },
    // 改变图片时触发
    changeImg () {
      // 得到选中的图片
      var img = this.$refs.myfile.files[0]

      //   //-----------将图片对象转为图片地址:方式一兼容性不好------------
      //   var path = URL.createObjectURL(img)
      //   // 使用预览组件
      //   ImagePreview([path])
      // -----------将图片对象转为图片地址:方式一------------

      // -----------将图片对象转为图片地址:方式二 兼容性好------------
      // 1.0 创建一个 fileRender 对象
      var reader = new FileReader()
      // 2.0 开始转换
      reader.readAsDataURL(img)
      // 3.0 添加转换完成的事件
      reader.addEventListener('load', () => {
        // 保存图片
        var path = reader.result
        // 预览图片
        ImagePreview({
          images: [path],
          onClose: this.imgClose
        })
      })

      // -----------将图片对象转为图片地址:方式二 兼容性好------------
    }, // 取消
    quxiao () {
      this.show = false
    },
    imgClose () {
      console.log('图片关闭了')
      // 询问用户是否将图片设置为头像
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否将图片设置为头像'
        })
        .then(async () => {
          // 得到选中的图片
          var img = this.$refs.myfile.files[0]
          console.log('1')
          // 将图片提交到服务器
          const res = await apiUpdateImg(img)
          // 接收返回的图片
          var imgPath = res.data.data.photo
          // 将图片传入给父组件
          this.$emit('passimg', imgPath)
          console.log(imgPath)
          // 关闭面板
          this.show = false
        })
        .catch(() => {
          console.log('取消')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.upload {
  .popupp {
    width: 90%;
    text-align: center;
    line-height: 50px;
    font-size: 16px;

    div {
      border-bottom: 1px solid #cccccc;
    }
  }
  /deep/ .van-picker__toolbar {
    position: relative;
    /deep/ .van-picker__cancel,
    /deep/ .van-picker__confirm {
      position: fixed;
      top: 0;
      left: 0;
    }
  }
}
</style>
